<!-- 页面 -->
<template>
    <div class="cai">
        <h1 class="hh1">
            <div>用户后台管理</div>
            <el-button class="tui" @click="tuid()">退出</el-button>
        </h1>


        <el-row class="rr">
            <el-col class="asas">
                <button class="el-icon-s-fold" :class="flog ? 'fa1' : 'faa1'" @click="flog = !flog"></button>
                <el-menu default-active="2" :class="flog ? 'fa' : 'faa'" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" background-color="#545c64" unique-opened text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="yong">
                                <i class="el-icon-menu"></i>
                                用户列表
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="guan">权限管理</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>订单管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>数据统计</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
                <div class="qwe">
                    <router-view></router-view>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<!-- vue -->
<script>

export default {
    data() {
        return {
            // 声明的属性
            flog: true
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        yong(){
            this.$router.push('yong')
        },
        guan(){
            this.$router.push('/quan')
        },
        tuid(){
            console.log(123);
            this.$router.to(0)
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.cai {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    background: #ccc;
}

.fa {
    width: 200px;
    height: 880px;
}

.faa {
    width: 50px;
    height: 880px;
    /* margin-left: -190px !important; */
}

.fa1 {
    width: 200px;
}

.faa1 {
    width: 50px;
}

.qwe {
    width: 85%;
    height: 90%;
    position: absolute;
    top: 80px;
    right: 0px;
}

.el-icon-s-fold {
    background: #4a5164;
}

.rr {
    margin-top: -30px;
}

.asas {
    margin-top: -30px;
}

.hh1 {
    width: 100%;
    height: 50px;
    float: left;
    height: 50px;
    width: 100%;
    background: #545c64;
    color: white;
    display: inline-flex;
}

.tui {
    position: absolute;
    right: 20px;
    float: right;

}
</style>